<template>
  <el-card class="box-card" shadow="never">
    <div slot="header" class="clearfix">
      <span>基本资料</span>
    </div>
    <div class="text item">
      <el-steps :active="active">
        <el-step title="验证方式"></el-step>
        <el-step title="安全验证"></el-step>
        <el-step title="绑定账号"></el-step>
      </el-steps>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item v-show="active == 1" label="选择验证方式">
          <el-select v-model="form.type" placeholder="验证方式">
            <el-option label="电子邮箱" value="e-mail"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="active == 2" label="电子邮箱">
          {{ userInfo.Email }}
        </el-form-item>
        <el-form-item v-show="active == 2" label="" prop="verificationCode">
          <div
            class="verification-code"
            :class="rules.isVerificationCode ? 'active' : ''"
          >
            <el-input
              v-model="form.verificationCode"
              placeholder="请输入验证码"
            ></el-input>
            <el-button>发送验证码</el-button>
          </div>
        </el-form-item>
        <el-form-item v-show="active == 3" label="电子邮箱">
          <div class="new-eMail" :class="rules.isnewEmail ? 'active' : ''">
            <el-input
              type="email"
              v-model="form.NewEmail"
              placeholder="请输入电子邮箱"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item v-show="active == 3" label="">
          <div
            class="verification-code2"
            :class="rules.isVerificationCode2 ? 'active' : ''"
          >
            <el-input
              v-model="form.verificationCode2"
              placeholder="请输入验证码"
            ></el-input>
            <el-button>发送验证码</el-button>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button v-if="active == 3" type="primary" @click="onSubmit"
            >保存设置</el-button
          >
          <el-button v-else type="primary" @click="next">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
// import { updateEmail } from "@/api/api";
import {mapState,mapMutations} from "vuex";
export default {
  data() {
    return {
      active: 1,
      form: {
        type: "e-mail",
        NewEmail: "",
        verificationCode: "",
        verificationCode2: "",
      },
      rules: {
        isVerificationCode: false,
        isnewEmail: false,
        isVerificationCode2: false,
      },
    };
  },
  computed:{
    ...mapState(['userInfo'])
  },
  created() {
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    next() {
      if (this.active == 2 && this.form.verificationCode?.trim().length == 0) {
        this.rules.isVerificationCode = true;
        return false;
      }
      if (this.active++ > 2) this.active = 1;
    },
    async onSubmit() {
      if (this.form.NewEmail?.trim().length == 0) {
        this.rules.isVerificationCode = false;
        this.rules.isnewEmail = true;
        return false;
      }
      if (this.form.verificationCode2?.trim().length == 0) {
        this.rules.isnewEmail = false;
        this.rules.isVerificationCode2 = true;
        return false;
      }

      const res = await this.$api.updateEmail({
        id: this.userInfo.id,
        Email: this.form.NewEmail,
      });
      if (res.code !== 200) return false;
      this.setUserInfo({value:res.data,app:this})
      this.$router.back();
    },
  },
};
</script>

<style lang="less" scoped>
.text.item {
  /deep/.el-steps {
    margin-bottom: 40px;
    .el-step {
      .el-step__head {
        .el-step__icon {
          width: 34px;
          height: 34px;
          border: 2px solid #0381c0;
          background: #08c;
          color: #fff;
          .el-step__line {
            top: 20px;
          }
          .el-step__icon-inner {
            font-weight: initial;
          }
        }
        .el-step__line {
          top: 20px;
        }
        &::before {
          content: "";
          display: block;
          width: 70px;
          height: 34px;
          position: absolute;
          left: -16px;
          background: #fff;
          z-index: 1;
        }
      }
      .el-step__head.is-finish {
        border-color: #08c;
      }
      .el-step__head.is-process,
      .el-step__head.is-wait {
        .el-step__icon {
          border-color: #b2b2b2;
          background: #2626264d;
        }
      }
      .el-step__main {
        .el-step__title.is-finish {
          color: #08c;
          font-weight: initial;
        }
        .el-step__title.is-process,
        .el-step__title.is-wait {
          color: #26262699;
          font-weight: initial;
        }
      }
    }
  }
  /deep/.el-form {
    .el-form-item__label {
      text-align: left;
    }
    .el-form-item__content {
      p {
        line-height: initial;
      }
      .el-select {
        width: 100%;
      }
      .verification-code,
      .verification-code2 {
        display: flex;
        .el-input {
          margin-right: 15px;
          background: #fff !important;
        }
      }
      .verification-code.active {
        .el-input {
          .el-input__inner {
            border-color: red;
            &::-webkit-input-placeholder {
              color: red;
            }
          }
        }
      }
      .new-Email.active {
        .el-input {
          .el-input__inner {
            border-color: red;
            &::-webkit-input-placeholder {
              color: red;
            }
          }
        }
      }
      .verification-code2.active {
        .el-input {
          .el-input__inner {
            border-color: red;
            &::-webkit-input-placeholder {
              color: red;
            }
          }
        }
      }
    }
  }
}
</style>